<template>
    <div class="main-container" id="main-aps">
        <!-- 流转卡号菜单 -->
        <div style="background-color: #fff;height:100%" id="ProductMasterData">
            <div class="jzys">
                <div class="jzys-title">
                    <span>流转卡信息</span>
                </div>
                <div class="contenter-sty">
                    <div class="sty-bj">
                        <router-link to="/productmasterdata/aps/planOrder">待开流转卡: {{pageData.orderAudit0}}</router-link>
                    </div>
                </div>
                <div class="contenter-sty">
                    <div class="sty-bj">
                        <router-link to="/circulationCardList">已开流转卡: {{pageData.orderAudit1}}</router-link>
                    </div>
                </div>
                <div class="contenter-sty">
                    <div class="sty-bj">
                        <span>已审核: {{pageData.audit}}</span>
                    </div>
                </div>
            </div>
        </div>

    </div>
</template>

<script lang="ts">
import { post, get } from "@/api/http";
import { defineComponent, reactive, ref, onMounted } from 'vue'
interface ClothSet {
    orderAudit0: number | undefined;
    orderAudit1: number | undefined;
    audit: number | undefined;
}
export default defineComponent({
    name: 'ProcessCardNumberManagement',
    setup() {
        function doRefresh() {

            pageData.pageLoading = true

            post({
                url: "/aps/circulatCard/getCirculatCardInfo",
            })
                .then(({ data, code }: any) => {
                    if (code === 200) {
                       // console.log(data, "结果");
                        pageData = data.data;
                    }
                })
                .catch(console.log).finally(() => {

                })
        }
        let pageData:any = reactive({
            orderAudit0:0,
            orderAudit1:0,
            audit:0,
        })
        onMounted(() => {
            doRefresh();
        });
        return {
            pageData,

        }
    },
})
</script>
<style scoped>
.main-container {
    height: 100%;
}

.jzys {
    width: 780px;
    height: 400px;
    position: absolute;
    top: 50%;
    left: 50%;
    margin-top: -200px;
    margin-left: -390px;
    box-shadow: 0px 7px 15px -3px #d4d4d4;
}

.jzys-title {
    height: 60px;
    background-color: #5e8af5;
    color: #ffffff;
    text-align: center;
    line-height: 60px;
    font-size: 26px;
}

.contenter-sty {
    font-size: 23px;
    color: #707070;
    cursor: pointer;
}

.sty-bj {
    width: 270px;
    margin: 0 auto;
    padding: 30px 0;
    text-align: center;
    border-bottom: 2px dashed #d4d4d4;
}

.contenter-sty:hover {
    background-color: #f7f8fa;
}
</style>